<template>
  <div>
    <todo-item
      v-for="item of todoList"
      :key="item.id"
      :item="item"
      @setStatus="setStatus"
      @removeTodo="removeTodo"
      @setDoing="setDoing"
    ></todo-item>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";
import { ITodo } from "@/typings/index";
import { IUseTodo, useTodo } from "@/hooks/index";

import TodoItem from "./Item.vue";

export default defineComponent({
  name: "TodoList",
  components: {
    TodoItem,
  },
  props: {
    //vue提供的PropType断言：作为typescript的泛型ITodo[]
    todoList: Array as PropType<ITodo[]>,
  },
  setup() {
    //把从自定义Hook定义的useTodo钩子底下的三个方法解构出来
    const { setStatus, removeTodo, setDoing }: IUseTodo = useTodo();

    return {
      //功能1：checkbox - 完成或未完成的选择
      setStatus,
      //功能2：button - 删除该项的功能
      removeTodo,
      //功能3：button - 正在做的确认按钮
      setDoing,
    };
  },
});
</script>